<template>
  <view class="container" :style="{ backgroundImage: `url(${getImageUrl('v-bg.png')})` }">
    <u-navbar
      backIconColor="#fff"
      :is-back="true"
      :background="background"
      :border-bottom="false"
      title-color="#fff"
    >
    </u-navbar>
    <view v-if="!tempImagePath" style="width: 100%; position: absolute; height: 100vh">
      <camera
        mode="normal"
        :device-position="cameraConfig.devicePosition"
        :flash="cameraConfig.flash"
        @error="cameraError"
        @stop="cameraStop"
        style="width: 100%; position: absolute; height: 100vh"
        @initdone="initdone"
      ></camera>
      <view class="fixed-wapper">
        <view class="ft-box">
          <view class="caozu0 dis-flex flex-x-center flex-y-center">
            <view class="items" @click="changePosition">
              <u-image src="@/static/fz.png" width="48rpx" height="48rpx"></u-image>
              <view class="des">翻转</view>
            </view>
            <view class="items" @click="onclick" @longpress="clickLongpress" @touchend="stopRecord">
              <view class="shexiang dis-flex flex-y-center flex-x-center">
                <view class="nei dis-flex flex-y-center flex-x-center">
                  <text class="video-size" v-if="isstartRecord">{{ videoLenght }}</text>
                </view>
              </view>
            </view>
            <view class="items" @click="recordVideo">
              <u-image src="@/static/xc.png" width="48rpx" height="48rpx"></u-image>
              <view class="des">相册</view>
            </view>
          </view>
          <view class="bt"> 长按进行拍摄视频 </view>
        </view>
      </view>
    </view>
    <view
      v-else
      class="dis-flex flex-y-center flex-x-center"
      style="width: 100%; position: absolute; height: 100vh"
    >
      <view class="" style="width: 100%; height: auto">
        <image :src="tempImagePath" style="width: 100%" mode="widthFix"></image>
      </view>
      <view class="fixed-wapper">
        <view class="ft-box">
          <view class="tiaojian dis-flex flex-x-center flex-y-center">
            <view class="items" @click="resetVideo">
              <view class="des">重新拍摄</view>
            </view>
            <view class="items" @click="nextPush">
              <view class="des">下一步</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: '#00000'
      },
      //   devicePositionOptions: [
      //       { value: 'front', label: '前置' },
      //       { value: 'back', label: '后置' }
      //   ],

      //   qualityOptions: [
      //       { value: 'normal', label: '普通质量' },
      //       { value: 'high', label: '高质量' },
      //       { value: 'low', label: '低质量' }
      //   ],
      imgInfo: {
        width: '',
        height: '',
        tempImagePath: ''
      },
      cameraConfig: {
        devicePosition: 'back',
        flash: 'auto'
      },
      takePhotoConfig: {
        quality: 'normal',
        selfieMirror: false
      },
      islongPress: false, //长按记录变量
      tempImagePath: '', //拍摄的照片或者视频封面
      tempVideoPath: '', // 拍摄的视频
      // cameraContext,
      videoLenght: 0,
      isstartRecord: false,
      timeOnline: null //计时器
    }
  },
  methods: {
    resetVideo() {
      this.videoLenght = 0
      this.isstartRecord = false
      this.timeOnline = null
      this.tempImagePath = ''
      this.tempVideoPath = ''
      this.islongPress = false
    },
    nextPush() {
      uni.navigateTo({
        url:
          '/uvideo/push?tempImagePath=' +
          this.tempImagePath +
          '&tempVideoPath=' +
          this.tempVideoPath
      })
    },
    recordVideo() {
      uni.chooseMedia({
        //, 'camera'
        //maxDuration: 120,
        count: 1,
        mediaType: ['image', 'video'], // 指定使用摄像头录像
        sourceType: ['album'],
        // camera: 'back', // 指定使用后置摄像头，可选值有front、back
        // 最大录制时长（秒）
        success: (res) => {
          // 获取视频录制文件的临时路径
          console.log('录制的视频文件路径:', res)
          if (res.tempFiles) {
            this.tempVideoPath = res.tempFiles[0].tempFilePath
            this.tempImagePath = res.tempFiles[0].thumbTempFilePath
          }

          // uni.showLoading({
          // 	title: "上传中..."
          // })
          // uploadFiles(res.tempFilePath).then(res2 => {
          // 	this.form.playUrl = res2.data
          // 	this.getVideoBase64(res2.data)
          // }).finally(() => {
          // 	uni.hideLoading()
          // })
          // 可以在这里处理视频文件，例如上传到服务器
        },
        fail: (err) => {
          uni.showModal({
            title: '未选择视频'
          })
        }
      })
    },
    clickLongpress() {
      // console.log("长按事件");
      this.islongPress = true
      this.startRecord()
    },
    onclick() {
      if (this.islongPress == false) {
        // console.log("不是长按事件");
        this.takePhoto()
      } else if (this.islongPress == true) {
        // console.log("长按事件");
        this.startRecord()
      }
    },
    takePhoto() {
      // console.log('takePhoto')
      const cameraContext = uni.createCameraContext()
      cameraContext.takePhoto({
        ...this.takePhotoConfig,
        success: (res) => {
          // this.imgInfo = res;
          console.log('takePhoto', res)
          this.tempImagePath = res.tempImagePath
        }
      })
    },
    changePosition() {
      if (this.cameraConfig.devicePosition == 'back') this.cameraConfig.devicePosition = 'front'
      else this.cameraConfig.devicePosition = 'back'

      // console.log('changePosition', this.cameraConfig.devicePosition)
    },
    startRecord() {
      const app = this
      const cameraContext = uni.createCameraContext()
      cameraContext.startRecord({
        ...app.takePhotoConfig,
        success: (res) => {
          // console.log('.res', res)
          // this.imgInfo = res;
          app.isstartRecord = true
          app.timeOnline = setInterval(() => {
            app.videoLenght++
          }, 1000)
        }
      })
    },
    stopRecord() {
      const cameraContext = uni.createCameraContext()
      cameraContext.stopRecord({
        ...this.takePhotoConfig,
        success: (res) => {
          console.log('stopRecord', res)
          // this.imgInfo = res;
          this.tempVideoPath = res.tempVideoPath
          this.tempImagePath = res.tempThumbPath
          clearInterval(this.timeOnline)
        }
      })
    },
    // flashChange(e) {
    //     console.log('flashChange', e);
    //     this.cameraConfig.flash = e.detail.value;
    // },
    cameraError(e) {
      console.log('用户不允许使用摄像头时触发 error:', e)
    },
    cameraStop(e) {
      console.log('摄像头在非正常终止时触发，如退出后台等情况 Stop:', e)
    },
    initdone(e) {
      console.log('相机初始化完成时触发 initdone', e)
    }
    // qualityChange(e) {
    //     console.log('qualityChange', e);
    //     this.takePhotoConfig.quality = e.detail.value;
    // },
    // devicePositionChange(e) {
    //     console.log('devicePositionChange', e);
    //     this.cameraConfig.devicePosition = e.detail.value;
    // }
  }
}
</script>

<style scoped lang="scss">
.container {
  // background: #000000;
  height: 100vh;
  position: relative;
  background-position: center;
  background-size: cover;
}

.ft-box {
  color: #fff;
}

.fixed-wapper {
  width: 100%;
  padding: 20rpx;
  position: fixed;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  left: 0;
  bottom: 0;

  .tiaojian {
    color: #999999;

    .items {
      width: 250rpx;
      padding: 20rpx;
      font-size: 28rpx;
      background-color: #fff;
      margin: 40rpx;
      text-align: center;
      border-radius: 35rpx;
    }

    .items:last-child {
      background-color: #10a28f;
      color: #fff;
    }
  }

  .caozu0 {
    width: 100%;
    border-bottom: 1rpx solid #ffffff91;

    .items {
      padding: 40rpx;
      font-size: 28rpx;

      .des {
        margin-top: 20rpx;
      }
    }

    .shexiang {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 6px solid #ffffff;

      .nei {
        width: 96rpx;
        height: 96rpx;
        background: #ea3d2f;
        border-radius: 50%;

        .video-size {
          font-size: 42rpx;
          font-weight: 600;
        }
      }
    }
  }

  .bt {
    text-align: center;
    padding: 35rpx;
  }
}
</style>
